<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
        }

        .artplayer-app {
            aspect-ratio: 16/9;
        }
    </style>
</head>
<body style="height: 2000px">
<div class="artplayer-app"></div>
<p style="height: 40px"></p>
<button onclick="setPip()">setPip</button>
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js"></script>-->
<script>
    function playM3u8(video, url, art) {
        if (Hls.isSupported()) {
            if (art.hls) art.hls.destroy();
            const hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
            art.hls = hls;
            art.on('destroy', () => hls.destroy());
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = url;
        } else {
            art.notice.show = 'Unsupported playback format: m3u8';
        }
    }

    // var art = new Artplayer({
    //         // id: 'your-url-id',
    //         container: '.artplayer-app',
    //         // url: 'https://c1.7bbffvip.com/video/piziwujiandaoguoyu/第01集/index.m3u8',
    //         url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
    //         autoplay: true,
    //     },
    //
    //     // function onReady(art) {
    //     //     console.log(111);
    //     //     art.play();
    //     // },
    // );

    var art = new Artplayer({
        container: '.artplayer-app',
        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
        // url: 'https://artplayer.org/assets/sample/video.mp4',
        // autoplay: true,
        muted: true,
        // autoSize: true,
        // loop: false,
        // pip: true,
        // autoMini: true,

        // setting: true,
        // flip: true,
        // playbackRate: true,
        // aspectRatio: true,
        // subtitleOffset: true,

        // settings: [
        //     {
        //         html: 'PIP Mode',
        //         tooltip: 'Close',
        //         icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
        //         switch: false,
        //         onSwitch: function (item, $dom, event) {
        //             console.info(item, $dom, event);
        //             const nextState = !item.switch;
        //             art.pip = nextState;
        //             console.log(111,nextState)
        //             item.tooltip = nextState ? 'Open' : 'Close';
        //             return nextState;
        //         },
        //     },
        // ],

        // contextmenu: [
        //     {
        //         disable: true
        //     },
        // ],
    });

    const setPip = function () {
        console.log(art);
        art.pip = true;
    }

    setTimeout(() => {
        art.on('ready', () => {
            console.log('----', 11);
            art.play();
        });
    }, 2000)

    art.setting.add({
        html: 'Slider',
        tooltip: '5x',
        icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
        range: [5, 1, 10, 1],
    });
</script>
</body>
</html>
